<template>
	<view>
		<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		<view class="content" v-if="albumList.length>0">
			<scroll-view @scrolltolower="handlescroll" scroll-y enable-flex class="album">
				<view class="item" v-for="item in albumList" @click="To_detail(item)">
					<image :src="item.preview" mode="aspectFill"></image>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import cateNew from "./cate-new/index.vue"
	import cateHot from "./cate-hot/index.vue"
	import{imgList} from"@/api/cate"
	export default{
		data(){
			return{
				parms:{
					limit:30,
					skip:0,
					order:"new"
				},
				imgId:"",
				list: [
						{name: '最新'}, 
						{name: '热门'}
			    ],
				current: 0,
				albumList:[],
				status: 'loading',
				iconType: 'flower',
				hasmore:true,
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		onLoad(options) {
			this.imgId=options.id
			this.loadData()
		},
		methods:{
			loadData(){
				const{limit,skip,order}=this.parms
				imgList('image/v1/vertical/category/'+this.imgId+'/vertical',{limit,skip,order}).then(res=>{
					console.log("imgList",res)
					if(res.res.vertical.length>0){
						this.status="loading"
					}else{
						this.status="nomore"
						this.hasmore=false
					}
					this.albumList=[...this.albumList,...res.res.vertical]
				})
			},
			// tab栏切换
			// 点击不同标题，让数组先为空，skip为0  再重新加载数据
			sectionChange(index){
				if(index==1){
					this.parms.order="hot"
					this.parms.skip=0
					this.albumList=[]
					this.loadData()
				}else{
					this.parms.order="new"
					this.parms.skip=0
					this.albumList=[]
					this.loadData()
				}
				
			},
			// scroll-view触底事件
			handlescroll(){
				if(this.hasmore){
					this.parms.skip+=this.parms.limit
					this.loadData()
				}
			},
			// 去图片详情
			To_detail(item){
				console.log(item)
				var newData=JSON.stringify(item)
				uni.navigateTo({
					url:'/pages/img/index?newData='+encodeURIComponent(newData)
				})
			}
		}
	}
</script>

<style lang="scss">
	.album{
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		height: calc(100vh - 70rpx);
		.item{
			width: 33.33%;
			height: 240rpx;
			image{
				height: 100%;
				width: 100%;
				border: 5rpx solid #fff;
			}
		}
	}
	u-loadmore{
		width: 100%;
		padding: 20rpx 0;
		
	}
</style>
